<template lang="pug">
  el-form.view-template-form(@submit.native.prevent v-loading="loading" element-loading-text="加载中..." :model="properties" ref="viewTemplateForm"  :label-width="labelWidth?labelWidth+'px':'80px'")
    compontent(v-for="(item,index) in dragList" :is="item.renderComponent" v-if="item.renderComponent"  :config="item.config")
</template>
<script>
import { addFunctionKey } from '../../pageComponents/formPlugins/utils/drag.js'
import _ from 'lodash'
import * as api from '../../pageComponents/formPlugins/service'
import * as utils from '../../pageComponents/formPlugins/utils'
import DataInterfaceObserverManage from '../../pageComponents/formPlugins/dataInterface/observerManage'

export default {
  name: 'viewTemplateForm',
  components: {},
  props: ['properties', 'dragList', 'sortable', 'labelWidth', 'pageEvent'],
  data() {
    return {
      loading: false,
      dataInterfaceObserverManage: new DataInterfaceObserverManage()
    }
  },
  provide() {
    return {
      rootForm: this,
      tabListComponents: {}, // 专门用于自配列表
      components: {}// 用于ref
    }
  },
  methods: {
    validate() {
      let res
      this.$refs['viewTemplateForm'].validate((valid) => {
        if (valid) {
          res = true
        } else {
          res = false
        }
      })
      return res
    },
    closeLoading() {
      this.$set(this, 'loading', false)
    },
  },
  mounted() {
    if (this.pageEvent) {
      return this.pageEvent.mounted && !!(new Function('$data', '$set', '$api', '$route', '$message', '$globalState', '$utils', 'return (' + this.pageEvent.mounted + ')() '))(this.properties, this.$set, api, this.$route, this.$message, this.$store.state, utils)
    }
  },
  beforeDestroy() {
    if (this.pageEvent) {
      return this.pageEvent.beforeDestroy && !!(new Function('$data', '$set', '$api', '$route', '$message', '$globalState', '$utils', 'return (' + this.pageEvent.beforeDestroy + ')() '))(this.properties, this.$set, api, this.$route, this.$message, this.$store.state, utils)
    }
  },
  created() {
    _.forEach(this.sortable, item => {
      _.forEach(item.list, one => {
        one && addFunctionKey(one)
      })
    })
    _.forEach(this.dragList, one => {
      one && addFunctionKey(one)
    })
    this.properties.validate = this.validate
    this.properties.loading = this.loading
    this.properties.closeLoading = this.closeLoading
    if (this.pageEvent && this.pageEvent.created) {
      let oPromise = (new Function('$data', '$set', '$api', '$route', '$message', '$globalState', '$utils', `return (${this.pageEvent.created})()`))(this.properties, this.$set, api, this.$route, this.$message, this.$store.state, utils)
      this.loading = true
      Promise.resolve(oPromise).then(() => {
        this.$emit('update:properties', _.cloneDeep(this.properties))
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss">
  .view-template-form {
    .el-collapse-item {
      .el-collapse-item__header {
        padding: 0 20px;
        background: #fff !important;
        color: #333 !important;
        font-size: 15px !important;
      }
      .el-collapse-item__content {
        border: none !important;
      }
    }
  }
</style>
